<template>
	<view>
		<view class="tab-bar row">
			<view :class="['tab-item',cur == 2 ? 'tab-active':'']" @click="changeTab(2)">租赁订单</view>
			<view :class="['tab-item',cur == 1 ? 'tab-active':'']" @click="changeTab(1)">出售订单</view>
		</view>
		<scroll-view class="scroll-view_X" scroll-x="true" v-if="cur ==2" enable-flex="true" scroll-left>
			<!-- <view class="row"> -->
				<view :class="['item',idx== -1 ? 'active' : '']" @click="changeType(-1)">全部</view>
				<view :class="['item',idx== 12 ? 'active' : '']" @click="changeType(12)">待审核</view>
				<view :class="['item',idx== 13 ? 'active' : '']" @click="changeType(13)">待支付</view>
				<!-- <view :class="['item',idx== 2 ? 'active' : '']" @click="changeType(2)">待配送</view> -->
				<view :class="['item',idx== 15 ? 'active' : '']" @click="changeType(15)">配送中</view>
				<view :class="['item',idx== 16 ? 'active' : '']" @click="changeType(16)">租赁中</view>
				<view :class="['item',idx== 23 ? 'active' : '']" @click="changeType(23)">结算中</view>
				<view :class="['item',idx== 24 ? 'active' : '']" @click="changeType(24)">已结算</view>
			<!-- </view> -->
		</scroll-view>
		<scroll-view class="scroll-view_X row" scroll-x="true" v-if="cur == 1" enable-flex="true">
			<!-- <view class="row"> -->
				<view :class="['item',idx== -1 ? 'active' : '']" @click="changeType(-1)">全部</view>
				<view :class="['item',idx== 0 ? 'active' : '']" @click="changeType(0)">待支付</view>
				<view :class="['item',idx== 2 ? 'active' : '']" @click="changeType(2)">待发货</view>
				<view :class="['item',idx== 3 ? 'active' : '']" @click="changeType(3)">已发货</view>
				<view :class="['item',idx== 5 ? 'active' : '']" @click="changeType(5)">已完成</view>
				<view :class="['item',idx== 6 ? 'active' : '']" @click="changeType(6)">已取消</view>
			<!-- </view> -->
		</scroll-view>
		<scroll-view scroll-y="true" :style="{'height':winH}" :scroll-top='topNum' class="scoll-content" @scrolltolower="scrolltolower">
			<view class="no-data" v-if="orderList.length == 0">
				暂无相关订单
			</view>
			<view v-else>
				<view class="order-item" v-for="(item,index) in orderList" :key="index" @click="toDetail(item.orderSn)">
					<view class="order-bar row">
						<text>订单编号{{item.orderSn}}</text>
						<text class="status">{{item.statusName}}</text>
					</view>
					<view class="good-item row" v-for="(it,idx) in item.headGoodsList" :key="idx">
						<view class="left row">
							<image :src="it.titleImg" mode="aspectFill" class="goods-img"></image>
							<view class="content">
								<view class="title">
									{{it.goodsName}}
								</view>
								<view class="color">
									规格：{{it.sku}}
								</view>
								<!-- <view class="size">
									尺寸：3*6*2.75
								</view> -->
							</view>
						</view>
						<view class="right" v-if="item.orderType ==2">
							<view class="day-rent">
								租赁:<text>￥</text>{{it.rentPrice}}/天
							</view>
							<view class="amount">
								x{{it.quantity}}
							</view>
						</view>
						<view class="right" v-if="item.orderType ==1">
							<view class="day-rent">
								出售金额:<text>￥</text>{{it.price}}
							</view>
							<view class="amount">
								x{{it.quantity}}
							</view>
						</view>
					</view>
					<view class="money-bar row">
						<text>下单时间：{{item.createTime}}</text>
						<text>订单金额：￥{{item.sumMoney}}</text>					
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import comm from '../../static/data/commFunc.js'
	import cfg from '../../static/data/config.js'
	var r = cfg.router;
	export default {
		data() {
			return {
				cur: 2,
				idx: -1,
				winH:"",
				topNum:0,
				list: [],
				orderList:[],
				list12:[],
				list13:[],
				list15:[],
				list16:[],
				list23:[],
				list24:[],
				orderType:2,
				current:1,
				list0:[],
				list2:[],
				list3:[],
				list5:[],
				list6:[]
			};
		},
		onLoad() {
			var that = this;
			uni.getSystemInfo({
				success: function(res) {
					console.log(res.windowHeight);
					that.winH = (res.windowHeight)+'px'
				}
			});
		},
		onShow(){
			this.getData()
		},
		onPullDownRefresh (){
			this.getData()
			this.idx = -1
			uni.stopPullDownRefresh()
		},
		onReachBottom(){
			comm.showToast("无更多数据", "none")
		},
		methods: {
			getData(){
				let data = {current:this.current,type:this.orderType}
				comm.request("POST", "/app/order/myList", data, (res, data) => {
					console.log(this.orderType,"订单列表", res)
					if (res.data.ret_code == 200) {
						this.list = data
						this.orderList = data
						if(this.orderType == 2){
							let list12 = []
							let list13 = []
							let list15 = []
							let list16 = []
							let list23 = []
							let list24 = []
							data.forEach(e=>{
								if(e.status == 12){
									list12.push(e)
								}else if(e.status == 13){
									list13.push(e)
								}else if(e.status == 15){
									list15.push(e)
								}else if(e.status == 16){
									list16.push(e)
								}else if(e.status == 23){
									list23.push(e)
								}else if(e.status == 24){
									list24.push(e)
								}
							})
							this.list12 = list12
							this.list13 = list13
							this.list15 = list15
							this.list16 = list16
							this.list23 = list23
							this.list24 = list24
						}else if(this.orderType== 1){
							let list0 = []
							let list2 = []
							let list3 = []
							let list5 = []
							let list6 = []
							data.forEach(e=>{
								if(e.status == 0){
									list0.push(e)
								}else if(e.status == 2){
									list2.push(e)
								}else if(e.status == 3){
									list3.push(e)
								}else if(e.status == 5){
									list5.push(e)
								}else if(e.status == 6){
									list6.push(e)
								}
							})
							this.list0 = list0
							this.list2 = list2
							this.list3 = list3
							this.list5 = list5
							this.list6 = list6
						}
					} else {
						comm.showToast(res.data.ret_msg, "none")
					}
				})
			},
			//切换订单类型
			changeTab(e) {
				this.cur = e
				this.idx = -1
				this.orderType = e
				this.topNum = 0
				this.getData()
			},
			//切换订单状态
			changeType(e) {
				this.idx = e
				if(this.cur ==2){
					if(e == -1){
						this.orderList = this.list
					}else if(e == 12){
						this.orderList = this.list12
					}else if(e == 13){
						this.orderList = this.list13
					}else if(e == 15){
						this.orderList = this.list15
					}else if(e == 16){
						this.orderList = this.list16
					}else if(e == 23){
						this.orderList = this.list23
					}else if(e == 24){
						this.orderList = this.list24
					}
				}else if(this.cur ==1){
					if(e == -1){
						this.orderList = this.list
					}else if(e == 0){
						this.orderList = this.list0
					}else if(e == 2){
						this.orderList = this.list2
					}else if(e == 3){
						this.orderList = this.list3
					}else if(e == 5){
						this.orderList = this.list5
					}else if(e == 6){
						this.orderList = this.list6
					}
				}
			},
			toDetail(orderSn){
				if(this.cur == 2){
					comm.navigateTo(r.rentOrderDetail+"?orderSn=" +orderSn)
				}else if(this.cur ==1){
					comm.navigateTo(r.orderDetail+"?orderSn=" +orderSn)
				}
			},
			scrolltolower(){
				comm.showToast("无更多数据", "none")
			}
		}
	}
</script>

<style lang="less">
	page {
		background: #F9F9F8;
	}

	.tab-bar {
		position: fixed;
		top: 0;
		width: 100%;
		height: 120rpx;
		box-sizing: border-box;
		;
		padding: 30rpx 50rpx;
		justify-content: space-around;
		background: #FFFFFF;

		.tab-item {
			padding: 10rpx 30rpx;
			font-size: 28rpx;
			color: rgba(25, 17, 11, 1);
			border-radius: 31rpx;
		}

		.tab-active {
			background: rgba(219, 48, 18, 1);
			color: #FFFFFF;
		}
	}

	.scroll-view_X {
		position: fixed;
		top: 120rpx;
		// width: 100%;
		height: 120rpx;
		box-sizing: border-box;
		padding: 30rpx 0;
		color: #666666;
		font-size: 26rpx;
		white-space:nowrap;
		display: block;
		line-height: 60rpx;
		.item {
			padding:0 50rpx;
			text-align: center;
			display:inline-block;
			// width: 200rpx;
		}
		
		.active {
			color: rgba(219, 48, 18, 1);
			position: relative;
		}
		
		.active:after {
			content: '';
			display: block;
			position: absolute;
			width: 23rpx;
			height: 5rpx;
			background: rgba(219, 48, 18, 1);
			border-radius: 3rpx;
			left: 50%;
			margin-left: -11.5rpx;
			// bottom: -20rpx;
		}
	}

	.scoll-content {
		padding:30rpx;
		padding-top: 240rpx;
		box-sizing: border-box;
		.order-item{
			padding:30rpx;
			background:rgba(255,255,255,1);
			border-radius:20rpx;
			margin:30rpx 0;
			.order-bar{
				justify-content: space-between;
				border-bottom: 1rpx solid #EEEEEE;
				font-size: 24rpx;
				color:#333333;
				padding-bottom: 30rpx;
				margin-bottom: 30rpx;
				.status{
					color:#19110B;
				}
			}
			.good-item {
				margin-bottom: 30rpx;
				justify-content: space-between;
				align-items: flex-start;
			
				.left {
					flex: 1;
					align-items: flex-start;
			
					.goods-img {
						width: 120rpx;
						height: 120rpx;
						border-radius: 10rpx;
						background: #F9F9F8;
						margin-right: 30rpx;
					}
			
					.content {
						flex: 1;
			
						.title {
							font-size: 24rpx;
							color: rgba(51, 51, 51, 1);
						}
			
						.color,
						.size {
							font-size: 20rpx;
							color: rgba(153, 153, 153, 1);
							margin-top: 10rpx;
						}
					}
				}
			
				.right {
					text-align: right;
			
					.day-rent {
						font-size: 24rpx;
						color: rgba(51, 51, 51, 1);
			
						text {
							font-size: 26rpx;
						}
					}
			
					.amount {
						font-size: 24rpx;
						color: rgba(153, 153, 153, 1);
					}
				}
			}
			.money-bar{
				justify-content: space-between;
				// justify-content: flex-end;
				font-size:24rpx;
				color:rgba(25,17,11,1);
				border-top: 1rpx solid #EEEEEE;
				padding-top: 30rpx;
			}
		}
		.order-item:first-child{
			margin-top:0;
		}
	}
	
</style>
